<template>
  <div>
    <a-modal
      :title="type ? '新增' : '编辑'"
      :visible="visible"
      :confirmLoading="confirmLoading"
      destroyOnClose
      @cancel="cancel"
      @ok="handleOk"
    >
      <a-form
        ref="ruleForm"
        :form="form"
        :label-col="{span:4}"
        :wrapper-col="{span:19}"
        layout="horizontal"
      >
        <a-form-item label="登录账号">
          <a-input
            id="loginAccount"
            v-decorator="['loginAccount',
              {
                initialValue:record.loginAccount,
                rules: [{ required: true,message:'登录账号不能为空' }]
              }
            ]"
            placeholder="请输入登录账号..."
            :maxLength="10"
          />
        </a-form-item>
        <a-form-item label="用户密码">
          <a-input-password
            type="password"
            id="passWord"
            :disabled="!type"
            v-decorator="['passWord',
              {
                initialValue: type ? null : '123456',
                rules: [{ required: type,message:'用户密码不能为空' }]
              }
            ]"
            placeholder="请输入用户密码..."
          />
        </a-form-item>
        <a-form-item label="用户昵称">
          <a-input
            id="nickName"
            v-decorator="['nickName',
              {
                initialValue:record.nickName,
                rules: [{ required: true,message:'用户昵称不能为空' }]
              }
            ]"
            placeholder="请输入用户昵称..."
          />
        </a-form-item>
        <a-form-item label="手机号">
          <a-input
            id="phoneNumber"
            v-decorator="['phoneNumber',
              {
                initialValue:record.phoneNumber,
              }
            ]"
            placeholder="请输入手机号..."
            :maxLength="11"
          />
        </a-form-item>
        <a-form-item label="角色">
          <a-select v-decorator="[ 'roleId',{ initialValue: record.roleId,rules: [{ required: true,message:'角色不能为空' }] }]" placeholder="请选择角色">
            <a-select-option value="" key=""> 全部</a-select-option>
            <a-select-option :value="item.roleId" v-for="item in roleSelectList"> {{item.roleName}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="状态">
          <a-switch
            checked-children="开启"
            un-checked-children="停用"
            :default-checked="!Number(record.state)"
            v-decorator="['state',
              {
                initialValue: record.state ? 0 : 1,
                rules: [{ required: true,message:'状态不能为空' }]
              }
            ]"
          />
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea
            :rows="4"
            v-decorator="['remark',
              {
                initialValue:record.remark,
              }
            ]"
            placeholder="请输入备注..."
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import store from '@/store'
import { message } from 'ant-design-vue'
import { addAdminInfo, getRoleList, updateAdminInfo } from '@/api/admin-manage'

export default {
  name: 'adminManagementAddEdit',
  props: ['visible', 'record', 'type'],
  data() {
    return {
      form: this.$form.createForm(this),
      confirmLoading: false,
      modalVisible: false,
      roleSelectList:[],
    }
  },
  watch: {
    visible(val) {
      this.modalVisible = val
    }
  },
  mounted() {
    this.roleList();
  },
  methods: {
    // 查询角色下拉列表
    roleList(){
      const params = {
        pageNum: 1,
        pageSize: 100,
        userId: store.getters.userInfo?.userId
      }
      getRoleList(params).then(res => {
        if(res.code === 200) {
          this.roleSelectList = res.data.records;
        }
      })
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        console.log(values)
        if (!err) {
          this.confirmLoading = true
          const params = {
           ...values,
            userId: store.getters.userInfo?.userId,
            state: values.state ? 0 : 1,
          }
          if(this.type){
            params.passWord = values.passWord;
          }
          // 如果是修改需要新增这两个参数
          if (!this.type) {
            delete params.passWord;
            params.id = this.record.id;
            params.updateUserId = this.record.userId;
            params.uuid = this.record.uuid;
          }
          let api = this.type ? addAdminInfo : updateAdminInfo
          api(params).then(res => {
            this.confirmLoading = false
            if (res.code === 200) {
              message.success(res.msg || '操作成功！')
              this.$emit('onOk', this.type ? 'add' : 'edit')
            }
          })
        }
      })
    },
    cancel() {
      this.resetFormValue()
      this.$emit('cancel')
    },
    // 重置表单一般在第一次访问表单时进行重置
    resetFormValue() {
      this.$nextTick(() => {
        this.form.resetFields()
      })
    }
  }
}
</script>

<style scoped lang="less">

</style>